<!-- 模块说明 -->
<template>
    <div>
        <van-nav-bar title="" left-text="返回首页" left-arrow @click-left="onClickLeft" />
        <div style="height: 226px;">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="ruleForm.phone" name="username" colon="true" label="用户名" placeholder="请输入手机号"
                        :rules="[{ required: true, message: '请输入正确用户名', trigger: 'onBlur' }]" />
                    <van-field :type="!passwordStatus ? 'password' : 'text'"
                        @click-right-icon="passwordStatus = !passwordStatus" v-model="ruleForm.password" name="password"
                        colon="true" label="验证码" placeholder="请输入验证码"
                        :rules="[{ required: true, message: '请输入正确验证码', trigger: 'onBlur' }]" />
                </van-cell-group>
                <van-button type="primary" size="mini" class="mini" color="#e1e1e1">获取验证码</van-button>
                <div style="margin: 46px; color: black;">
                    <van-button text="#000" round block type="primary" color="#df9464" native-type="submit"
                        @submit="onSubmit">
                        登录
                    </van-button>
                </div>
            </van-form>
            <div class="denglu">
                <router-link to="/login"><span>密码登录</span></router-link>
                <router-link to="/logon"><span>新用户注册</span></router-link>

            </div>
            <van-divider :style="{ color: '#a1a1a1', borderColor: '#000', padding: '0 16px' }">
                其他方式登录
            </van-divider>
            <div style="font-size: 12px; margin-top: 15px; margin-left: 36px; margin-bottom: 40px;">
                <van-radio-group v-model="checked" @click="!checked">
                    <van-radio icon-size="18px" name="1">我已阅读并同意 <span>《服务协议》</span> <span>《隐私保护协议》</span>
                    </van-radio>
                </van-radio-group>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { ref, reactive } from 'vue';
import 'vant/es/toast/style';
import { useStore } from "vuex"
import { Notify } from 'vant';
const router = useRouter()
const store = useStore();
const passwordStatus = ref(false);
// 服务协议选框
const checked = ref(false)
const ruleForm = reactive({
    phone: '',
    password: ''
})
const onClickLeft = () => router.push('/me');
const onSubmit = (values: any) => {
    let token = 'hahahah'
    sessionStorage.setItem('isLogin', token)
    router.push('/home')
    // router.push('/')
    //     store.dispatch('user/alogin', ruleForm).then((res) => {
    //         console.log(res, 'denglu')
    //         if (res.data.code == 200) {
    //             Notify({ type: 'success', message: '登录成功' })

    //         } else {
    //             Notify({ type: 'danger', message: '账户或密码错误' })
    //         }
    //         router.push('/')
    //     })
}
</script>
<style lang="scss" scoped>
.denglu {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;

    span {
        font-size: 14px;
        color: #818181;
    }
}

.mini {
    float: right;
    margin-bottom: 30px;
    margin-right: 20px;
}
</style>
